<!DOCTYPE html>
<html>
<head>

<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAI-RtNsvbI_3Xy11FM4OhPHyEmNXv-Uu8&sensor=false">
</script>

<script>
var x=new google.maps.LatLng(49.803168,15.580859);
var brno = new google.maps.LatLng(49.188884,16.600342);
var praha = new google.maps.LatLng(50.071244,14.425049);
var pardubice = new google.maps.LatLng(50.04303,15.787354);
var plzen = new google.maps.LatLng(49.736463,13.366241);
var protivin = new google.maps.LatLng(49.212215,14.215851);
function initialize()
{
var mapProp = {
  center:x,
  zoom:7,
  mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var czechTrip =[protivin,praha,plzen,protivin];

var flightPath=new google.maps.Polygon({
  path:czechTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#000FFF",
  fillOpacity:0.4
  });
var marker=new google.maps.Marker({
  position:praha,
  animation:google.maps.Animation.BOUNCE
  });

marker.setMap(map);

var myCity = new google.maps.Circle({
  center:brno,
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

var myCity2 = new google.maps.Circle({
  center:pardubice,
  radius:20000,
  strokeColor:"#FF0000",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#FF0000",
  fillOpacity:0.4
});


myCity.setMap(map);
myCity2.setMap(map);
flightPath.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>


</head>

<body>
<div id="googleMap" style="width:824px;height:568px;"></div>
</body>
</html>
